<template>
  <div class="main">
    <div class="header">
      <div class="yonghu">
        <van-image
          round
          width="45px
            "
          height="45px"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div>
          <p>蒋先生</p>
          <p>180****0626</p>
        </div>
      </div>
      <div>
        <van-icon size="23px" color="white" class="pinglun" name="chat-o" />
        <van-icon
          size="23px"
          color="white"
          name="setting-o"
          @click="$router.push(`/SetItem`)"
        />
      </div>
    </div>
    <div class="myorder">
      <p>我的订单</p>
      <div class="iconsy">
        <div>
          <van-image
            width="32px"
            height="32px"
            src="/icon/daifukuan.svg"
          ></van-image>
          <span>待付款</span>
        </div>
        <div>
          <van-image
            width="32px"
            height="32px"
            src="/icon/songhuoche.svg"
          ></van-image
          ><span>待收货</span>
        </div>
        <div>
          <van-image
            width="32px"
            height="32px"
            src="/icon/tuihuo.svg"
          ></van-image
          ><span>待评价</span>
        </div>
        <div>
          <van-image
            width="32px"
            height="32px"
            src="/icon/pinglun.svg"
          ></van-image
          ><span>退货/售后</span>
        </div>
        <div>
          <van-image
            width="32px"
            height="32px"
            src="/icon/dingdan.svg"
          ></van-image
          ><span>全部订单</span>
        </div>
      </div>
      <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f2f2f2">
          <van-swipe-item>
            <div class="banner">
              <div class="banner-2">
                <van-image
                  width="3rem"
                  height="3rem"
                  fit="cover"
                  position="center"
                  src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202202/gbom/6941487279401/428_428_B8260F5507297A590EA956E9024B1140mp.png"
                />
                <div>
                  <p>等待付款</p>
                  <p style="color: #9999b0">剩余时间</p>
                </div>
              </div>
              <van-button
                class="banner-1"
                round
                color="#ff6a00"
                plain
                hairline
                type="primary"
                >去付款</van-button
              >
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="banner">
              <div class="banner-2">
                <van-image
                  width="3rem"
                  height="3rem"
                  fit="cover"
                  position="center"
                  src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202202/gbom/6941487279401/428_428_B8260F5507297A590EA956E9024B1140mp.png"
                />
                <div>
                  <p>等待发货</p>
                  <p style="color: #9999b0">到达时间</p>
                </div>
              </div>
              <van-button
                class="banner-1"
                round
                color="#ff6a00"
                plain
                hairline
                type="primary"
                >查看</van-button
              >
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="youhuiqiandao">
      <van-cell size="large" span="11" title="优惠券" is-link label="五张可用" to="/myfuli"
      />
      <van-cell size="large" span="11" title="签到领福利" is-link label="今日未签到" to="/myqiandao"/>
    </div>
    <!-- 活动activity展示面板 抽奖、促销 -->
    <div class="activity">
      <div class="activity-erzi">
        <div class="activity-1">
          <van-image
            height="100%"
            fit="contain"
            src="https://gd1.alicdn.com/imgextra/i2/2758433361/O1CN0180E5YR1ahNqPA7l4F_!!0-item_pic.jpg_500x500.jpg"
          />
        </div>
        <div class="activity-2">
          <div>
            <strong style="color: var(--color-grey-three)">秒杀</strong>
            <span style="color: var(--color-grey-three)">黄桃罐头</span>
            <br />
            <br />
            <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
          </div>
          <div></div>
        </div>
        <div class="activity-3">
          <van-button class="activity-3-1" round color="var(--color-primary)"
            >点击参加</van-button
          >
        </div>
      </div>
      <div class="zuihou">
        <van-cell
          title-style="margin-top:-7px;margin-left:10px;"
          size="large"
          is-link
          to="/address"
          title="收货地址"
          icon="/icon/local.svg"
        />
        <van-cell
          title-style="margin-top:-7px;margin-left:10px;"
          size="large"
          is-link
          to="/collect"
          title="我的收藏"
          icon="/icon/like.svg"
        />
        <van-cell
          title-style="margin-top:-7px;margin-left:10px;"
          size="large"
          is-link
          title="意见反馈"
          icon="/icon/mail-unpacking.svg"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const time = ref(30 * 60 * 60 * 1000)
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.header {
  width: 100%;
  align-items: center;
  height: 80px;

  background-color: #ff6a00;
  display: flex;
  justify-content: space-between;
}
.yonghu {
  align-items: center;
  display: flex;
  margin-top: 10px;
}
.yonghu p {
  line-height: 20px;
  color: white;
  margin-left: 10px;
  font-size: 14px;
}
.pinglun {
  margin-right: 15px;
}
.myorder {
  width: 100%;
  padding-top: 10px;
  margin-top: 10px;
  padding-bottom: 10px;
  background-color: white;
}
.myorder p {
  margin-left: 10px;
  font-size: 14px;
}
.iconsy {
  margin-top: 10px;
  display: block;

  display: flex;
  justify-content: space-evenly;
}
.iconsy div {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.iconsy span {
  font-size: 13px;
  text-align: center;
}
.youhuiqiandao {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-evenly;
}
.youhuiqiandao .van-cell{
  width: 46%;
  border-radius: 5px;
}
/* 活动activity */
.activity {
  width: 100%;
  cursor: pointer;

  .activity-erzi {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 96%;
    height: 100px;
    margin: 0 auto;
    background: transparent;
    background: linear-gradient(
      90.7044974050849deg,
      rgba(255, 166, 138, 1) 0%,
      rgba(251, 88, 0, 1) 46%,
      rgba(253, 97, 97, 1) 100%
    );
    border-radius: 2px;
    box-shadow: 0px 0px 5px rgb(255 106 0);

    position: relative;
    .activity-1 {
      padding: 5px 0;
      line-height: 100px;
    }
    .activity-2 {
      flex: 1;
      position: absolute;
      top: 50%;
      margin-top: -30px;
      left: 50%;
      margin-left: -73px;
    }
    .activity-3 {
      line-height: 100px;
      .activity-3-1 {
        height: 30px;
        border: 1px solid var(--color-grey-three) !important;
      }
    }
  }
}
.zuihou {
  margin-top: 10px;
}
.zuihou .van-cell {
  align-items: center;
  line-height: 50px;
}
.my-swipe {
  border-radius: 15px;
  width: 90%;
  margin: 10px auto 0;
  background-color: #f2f2f2;
  height: 60px;
}
.van-swipe-item .van-image {
  margin-left: 11px;
  width: 60px;
  height: 50px;
}
.banner {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  align-items: center;
}
.banner-1 {
  background-color: #f2f2f2;
  height: 25px;
  margin-right: 10px;
  font-size: 12px;
}
.banner-2 {
  display: flex;
}
.banner-2 p {
  font-size: 12px;
  display: block;
  padding: 5px;
}
</style>
<style></style>
